import { lineOption, circleOption } from 'common/js/config'
import echarts from 'echarts'
// 基础line，bar图
export function baseChart (el, legend, data, xaxis, type) {
  let myChart = echarts.init(el)
  const option = Object.assign({}, lineOption, {
    legend: {
      data: legend,
      align: 'left',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: '12px'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: xaxis,
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#3ac0ff'
          }
        }
      }
    ],
    yAxis: [
      {
        min: 0,
        max: function (value) {
          return value.max + 3
        },
        type: 'value',
        axisLabel: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#3ac0ff'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(14,78,215,0.5)'
          }
        }
      }
    ]
  })
  option.series = []
  legend.map(item => {
    option.series.push({
      name: item,
      type: type,
      barWidth: 20,
      data: data,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#fdd158'
          }, {
            offset: 1,
            color: '#e65a55'
          }])
        }
      }
    })
  })
  if (legend[0] === '合格率') {
    option.yAxis[0].max = 100
  }
  myChart.setOption(option)
}

// 基础饼图
export function baseCircle (el, title, legend, data) {
  let myChart = echarts.init(el)
  const option = Object.assign({}, circleOption, {
    legend: {
      orient: 'horizontal',
      left: 'center',
      data: legend,
      textStyle: {
        color: '#fff',
        fontSize: '12px'
      }
    },
    series: [
      {
        name: title,
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: data,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
  myChart.setOption(option)
}

// 河长办主页折线区域图
export function createEfficiencyChart (arr, el) {
  let option = {}
  let myChart = echarts.init(el)
  let xaxis = []
  let num = []
  let checkNum = []
  if (arr === undefined || arr.length == '0') {
    return
  }
  arr.map(item => {
    xaxis.push(item.name)
    num.push(item.allnum)
    checkNum.push(item.num)
  })
  option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['超时事件数', '待处理数'],
      align: 'left',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: '12px'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: xaxis,
        boundaryGap: false,
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0,
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#3ac0ff'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(14,78,215,0.5)'
          }
        }
      }
    ],
    yAxis: [
      {
        min: 0,
        max: function (value) {
          return value.max + 3
        },
        type: 'value',
        axisLabel: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#3ac0ff'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(14,78,215,0.5)'
          }
        }
      }
    ],
    series: [
      {
        name: '超时事件数',
        type: 'line',
        areaStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#e65a55' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#fdd158' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        },
        data: checkNum,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#e02544'
              },
              {
                offset: 1,
                color: '#ff7d50'
              }
            ])
          }
        }
      },
      {
        name: '待处理数',
        type: 'line',
        areaStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#008c80' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#bee485' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        },
        data: num,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#009aff'
              },
              {
                offset: 1,
                color: '#02eae2'
              }
            ])
          }
        }
      }
    ]
  }
  myChart.setOption(option)
}

// 河长办主页用户概况图
export function createAppChart (arr, el) {
  let option = {}
  let myChart = echarts.init(el)
  let xaxis = []
  let num = []
  let checkNum = []
  let finalNum = 0
  if (arr === undefined || arr.length == '0') {
    return
  }
  arr.map(item => {
    xaxis.push(item.name)
    num.push(item.num)
    checkNum.push(item.checknum)
  })
  let max = Math.max.apply(null, num)
  var length = Math.ceil(max / 100)
  for (var i = 0; i < length; i++) {
    finalNum += 100
  }
  let newArr = []
  arr.map(item => {
    newArr.push(finalNum)
  })
  option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(14,78,215,0.2)'
        }
      },
      backgroundColor: 'rgb(14,78,215,0.5)',
      formatter: '{b0}{a0}:{c0},{a1}:{c1}'
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      data: ['活跃人数', '总人数'],
      textStyle: {
        color: '#fff',
        fontSize: '12px'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0,
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#3ac0ff'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        data: xaxis,
        axisLabel: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#3ac0ff'
          }
        }
      },
      {
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: xaxis
      }
    ],
    series: [
      {
        type: 'bar',
        yAxisIndex: 1,
        zlevel: 1,
        data: newArr,
        itemStyle: {
          normal: {
            color: 'rgba(33,64,161,0.5)',
            barBorderRadius: [5]
          }
        }
      },
      {
        type: 'bar',
        data: newArr,
        barGap: '100%',
        yAxisIndex: 1,
        zlevel: 1,
        itemStyle: {
          normal: {
            color: 'rgba(33,64,161,0.5)',
            barBorderRadius: [5]
          }
        }
      },
      {
        name: '活跃人数',
        type: 'bar',
        data: checkNum,
        zlevel: 2,
        label: {
          normal: {
            show: true,
            position: 'insideRight'
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#e65a55'
              },
              {
                offset: 1,
                color: '#fdd158'
              }
            ]),
            barBorderRadius: [5]
          }
        }
      },
      {
        name: '总人数',
        type: 'bar',
        data: num,
        zlevel: 2,
        barGap: '100%',
        label: {
          normal: {
            show: true,
            position: 'insideRight'
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#0072ff'
              },
              {
                offset: 1,
                color: '#3ac0ff'
              }
            ]),
            barBorderRadius: [5]
          }
        }
      }
    ]
  }
  myChart.setOption(option)
}

// 让x轴打竖显示的formatter
// function formatter (arr) {
//  let xaxis = []
//  arr.map((item, index) => {
//   var Arr = [...item]
//   xaxis[index] = `${Arr[0]}\n${Arr[1]}\n${Arr[2]}\n${Arr[3]}\n${Arr[4]}\n`
//  })
//   return xaxis
// }

// user-count柱状图和线图
export function userLineChart (xaxis, data, el, legend, type) {
  let option = {}
  let myChart = echarts.init(el)
  option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: legend,
      align: 'left',
      left: 'center',
      textStyle: {
        fontSize: '12px'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: xaxis,
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          rotate: -15,
          interval: 0
        }
      }
    ],
    yAxis: [
      {
        min: 0,
        max: function (value) {
          return value.max + 4
        },
        type: 'value'
      }
    ],
    series: [
      {
        name: legend[0],
        type: type,
        barWidth: 20,
        data: data,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#e02544'
              },
              {
                offset: 1,
                color: '#ff7d50'
              }
            ])
          }
        }
      }
    ]
  }
  myChart.setOption(option)
}

// user-count饼图
export function userCircle (el, title, data, legend) {
  let option = {}
  let myChart = echarts.init(el)
  option = {
    color: [
      '#c23531',
      '#1e90ff',
      '#ff7f10',
      '#00fa9a',
      '#749f83',
      '#61a0a8',
      '#d48265',
      '#91c7ae'
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: '10',
      data: legend,
      textStyle: {
        fontSize: '12px'
      }
    },
    series: [
      {
        name: title,
        type: 'pie',
        radius: '55%',
        center: ['80%', '60%'],
        data: data,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  myChart.setOption(option)
}

// 数据一张图-土壤湿度
export class soilMoisture {
  constructor (data, title, company) {
    this.echartData = {
      title: {
        text: title,
        x: 'center',
        textStyle: {
          color: 'black',
          fontWeight: 'normal',
          fontSize: 16
        }
      },
      grid: {
        top: '11%',
        bottom: '5%',
        left: '5%',
        right: '5%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(0, 0, 0, 0.2)'
          }
        },
        textStyle: {
          fontSize: 14
        },
        formatter: (params) => {
          let str = `<div>${params[0].axisValue} ${title}</div>`

          let arr = params.reverse()

          arr.map(item => {
            str += `<div style="display: flex;align-items: center;">
									<div style="width: 6px;height: 6px;border-radius: 3px;background-color: ${item.color}"></div>
									<div style="padding-left: 5px;">${item.seriesName} : ${item.value} ${company}</div>
								</div>`
          })

          return str
        }
      },
      legend: {
        show: true,
        top: '6%',
        itemHeight: 10,
        itemWidth: 16,
        itemGap: 15,
        textStyle: {
          fontSize: 14,
          color: 'black'
        },
        data: ['10厘米深度', '20厘米深度', '30厘米深度', '40厘米深度', '50厘米深度']
      },
      xAxis: {
        show: true,
        axisLine: {
          lineStyle: {
            color: 'gray'
          }
        },
        axisLabel: {
          textStyle: {
            fontSize: '14',
            color: 'black'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#gray'
          },
          alignWithLabel: true
        },
        data: this.getTimes()
      },
      yAxis: {
        name: `(${company})`,
        nameTextStyle: {
          color: 'black',
          fontSize: 14,
          nameGap: 0,
          lineHeight: 1,
          padding: [0, 70, 5, 0]
        },
        axisLine: {
          lineStyle: {
            color: 'gray'
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14,
            color: 'black'
          }
        },
        splitLine: {
          show: false
        }
      },
      series: [{
        name: '50厘米深度',
        type: 'bar',
        barWidth: 25,
        barGap: 20,
        barCategoryGap: 20,
        stack: '历年工单量趋势',
        data: data.deepth50,
        itemStyle: {
          normal: {
            barBorderRadius: 3
          }
        }
      },
      {
        name: '40厘米深度',
        type: 'bar',
        stack: '历年工单量趋势',
        data: data.deepth40,
        itemStyle: {
          normal: {
            barBorderRadius: 3
          }
        }
      },
      {
        name: '30厘米深度',
        type: 'bar',
        stack: '历年工单量趋势',
        data: data.deepth30,
        itemStyle: {
          normal: {
            barBorderRadius: 3
          }
        }
      },
      {
        name: '20厘米深度',
        type: 'bar',
        stack: '历年工单量趋势',
        data: data.deepth20,
        itemStyle: {
          normal: {
            barBorderRadius: 3
          }
        }
      },
      {
        name: '10厘米深度',
        type: 'bar',
        stack: '历年工单量趋势',
        data: data.deepth10,
        itemStyle: {
          normal: {
            barBorderRadius: 3
          }
        }
      }
      ]
    }
  }

  getTimes () {
    var timeData = []

    for (var i = 0; i < 24; i++) {
      timeData.push(i + ':00')
    }

    return timeData
  }
}

// 数据一张图-实时数据-有内外江
export class wateringLevel {
  constructor (data) {
    this.echartData = {
      title: {
        text: '实时水位趋势',
        x: 'center',
        top: 20
      },
      grid: {
        left: 70
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.x
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} m'
        }
      },
      series: [{
        name: '内江',
        type: 'line',
        data: data.inner
      }, {
        name: '外江',
        type: 'line',
        data: data.outer
      }]
    }
  }
}

// 数据一张图-实时数据-无内外江
export class wateringLogging {
  constructor (data, title = '水位') {
    this.echartData = {
      title: {
        text: '实时水位趋势',
        x: 'center',
        top: 20
      },
      grid: {
        left: 70
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.x
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} m'
        }
      },
      series: [{
        name: title,
        type: 'line',
        data: data.outer
      }]
    }
  }
}

// 数据一张图-内河涌-水质趋势图-PH值
export const waterPicturePh = {
  title: [{
    left: 'center',
    text: 'PH值趋势图',
    top: 20
  }],
  color: ['#303f9f'],
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '3%',
    top: '13%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    },
    data: ['2000-06-05', '2000-06-06', '2000-06-07', '2000-06-08', '2000-06-09', '2000-06-10', '2000-06-11']
  },
  yAxis: {
    name: '值',
    min: 5,
    splitNumber: 20,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    }
  },
  series: [{
    name: 'ph值',
    type: 'line',
    smooth: true,
    symbolSize: 12,
    data: ['6.2', '6.1', '6.5', '7.3', '6.4', '7', '7.2'],
    label: {
      normal: {
        show: false,
        position: 'top' // 值显示
      }
    }
  }]
}

// 数据一张图-内河涌-水质趋势图-悬浮物
export const waterPictureSuspended = {
  title: [{
    left: 'center',
    text: '悬浮物趋势图',
    top: 20
  }],
  color: ['#303f9f'],
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '3%',
    top: '13%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    },
    data: ['2000-06-05', '2000-06-06', '2000-06-07', '2000-06-08', '2000-06-09', '2000-06-10', '2000-06-11']
  },
  yAxis: {
    name: '值',
    min: 0,
    splitNumber: 10,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    }
  },
  series: [{
    name: '悬浮物',
    type: 'line',
    smooth: true,
    symbolSize: 12,
    data: [0.9, 0.4, 1, '', 0.4, 0.7, 0.6],
    label: {
      normal: {
        show: false,
        position: 'top' // 值显示
      }
    }
  }]
}

// 数据一张图-内河涌-水质趋势图-化学需氧量
export const waterPictureChemistry = {
  title: [{
    left: 'center',
    text: '化学需氧量趋势图',
    top: 20
  }],
  color: ['#303f9f'],
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '3%',
    top: '13%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    },
    data: ['2000-06-05', '2000-06-06', '2000-06-07', '2000-06-08', '2000-06-09', '2000-06-10', '2000-06-11']
  },
  yAxis: {
    name: '值',
    min: 4,
    splitNumber: 20,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    }
  },
  series: [{
    name: '化学需氧量',
    type: 'line',
    smooth: true,
    symbolSize: 12,
    data: [4.9, 4.4, 5, 4.6, 5.4, 4.7, 5.6],
    label: {
      normal: {
        show: false,
        position: 'top' // 值显示
      }
    }
  }]
}

// 数据一张图-内河涌-水质趋势图-生物需氧量
export const waterPictureBiology = {
  title: [{
    left: 'center',
    text: '生化需氧量趋势图',
    top: 20
  }],
  color: ['#303f9f'],
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '3%',
    top: '13%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    },
    data: ['2000-06-05', '2000-06-06', '2000-06-07', '2000-06-08', '2000-06-09', '2000-06-10', '2000-06-11']
  },
  yAxis: {
    name: '值',
    min: 2,
    splitNumber: 10,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    }
  },
  series: [{
    name: '生化需氧量',
    type: 'line',
    smooth: true,
    symbolSize: 12,
    data: [2.9, 2.4, 3, 2.6, 3.4, 2.7, 2.6],
    label: {
      normal: {
        show: false,
        position: 'top' // 值显示
      }
    }
  }]
}

// 数据一张图-内河涌-水质趋势图-氨氮需氧量
export const waterPictureAmmonia = {
  title: [{
    left: 'center',
    text: '氨氮趋势图',
    top: 20
  }],
  color: ['#303f9f'],
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '3%',
    top: '13%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    },
    data: ['2000-06-05', '2000-06-06', '2000-06-07', '2000-06-08', '2000-06-09', '2000-06-10', '2000-06-11']
  },
  yAxis: {
    name: '值',
    min: 0,
    splitNumber: 10,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    }
  },
  series: [{
    name: '氨氮',
    type: 'line',
    smooth: true,
    symbolSize: 12,
    data: [0.9, 0.4, 1, 0.6, 0.4, 0.7, 0.6],
    label: {
      normal: {
        show: false,
        position: 'top' // 值显示
      }
    }
  }]
}

// 数据一张图-内河涌-水质趋势图-总磷需氧量
export const waterPictureTotal = {
  title: [{
    left: 'center',
    text: '总磷趋势图',
    top: 20
  }],
  color: ['#303f9f'],
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '3%',
    top: '13%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    },
    data: ['2000-06-05', '2000-06-06', '2000-06-07', '2000-06-08', '2000-06-09', '2000-06-10', '2000-06-11']
  },
  yAxis: {
    name: '值',
    min: 0,
    splitNumber: 10,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: { // 网格线
      show: true,
      lineStyle: {
        color: ['#23303f'],
        type: 'solid'
      }
    }
  },
  series: [{
    name: '总磷',
    type: 'line',
    smooth: true,
    symbolSize: 12,
    data: [0.9, 0.4, 1, 0.6, 0.4, 0.7, 0.6],
    label: {
      normal: {
        show: false,
        position: 'top' // 值显示
      }
    }
  }]
}

// 数据一张图-内河涌-水位曲线图
export const waterLevel = {
  title: {
    text: '',
    x: 'left',
    textStyle: {
      color: '#fff100',
      fontSize: 12
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['00:00', '03:00', '09:00', '12:00', '14:00', '16:00'],
    nameTextStyle: {
      color: 'black'
    },
    axisLine: {
      lineStyle: {
        color: 'black',
        width: 1
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '水位 (m)',
    splitLine: {
      show: false
    },
    nameTextStyle: {
      color: 'black'
    },
    axisLabel: {
      formatter: '{value}'
    },
    axisPointer: {
      snap: true
    },
    axisLine: {
      lineStyle: {
        color: 'black',
        width: 1
      }
    }
  },
  visualMap: {
    show: false,
    type: 'piecewise',
    pieces: [{
      min: 5,
      color: 'red'
    }, {
      max: 4.9,
      color: 'green'
    }]
  },
  series: [{
    name: '水位',
    type: 'line',
    smooth: true,
    data: [5, 6, 3, 7, 10, 2]
  }]
}

// 南海区发射状Echart
export function getNoramlMap () {
  let geoCoordMap = {
    '南海水务': [113.149648, 23.037042],
    '西樵': [112.945865, 22.944525],
    '九江': [112.969926, 22.836815],
    '丹灶': [112.926055, 23.056794],
    '罗村': [113.058184, 23.064774],
    '大沥': [113.116816, 23.114405],
    '狮山': [113.025635, 23.120818],
    '桂城': [113.208421, 23.022061],
    '里水': [113.14069, 23.204815]
  }

  let BJData = [
    [{
      name: '西樵'
    }, {
      name: '南海水务',
      value: 90
    }],
    [{
      name: '九江'
    }, {
      name: '南海水务',
      value: 90
    }],
    [{
      name: '丹灶'
    }, {
      name: '南海水务',
      value: 90
    }],
    [{
      name: '狮山'
    }, {
      name: '南海水务',
      value: 90
    }],
    [{
      name: '里水'
    }, {
      name: '南海水务',
      value: 90
    }],
    [{
      name: '罗村'
    }, {
      name: '南海水务',
      value: 90
    }],
    [{
      name: '大沥'
    }, {
      name: '南海水务',
      value: 90
    }],
    [{
      name: '桂城'
    }, {
      name: '南海水务',
      value: 90
    }]
  ]

  function convertData (data) {
    let res = []
    for (let i = 0; i < data.length; i++) {
      let dataItem = data[i]
      let fromCoord = geoCoordMap[dataItem[0].name]
      let toCoord = geoCoordMap[dataItem[1].name]
      if (fromCoord && toCoord) {
        res.push({
          fromName: dataItem[0].name,
          toName: dataItem[1].name,
          coords: [fromCoord, toCoord]
        })
      }
    }
    return res
  };

  let series = [];

  [
    ['', BJData]
  ].forEach(function (item, i) {
    series.push({
      name: item[i],
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        brushType: 'stroke'
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          formatter: '{b}'
        }
      },
      symbolSize: function (val) {
        return val[2] / 8
      },
      itemStyle: {
        normal: {
          color: 'white'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: geoCoordMap[dataItem[0].name].concat([90])
        }
      })
    }, {

        type: 'lines',
        zlevel: 1,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          color: 'red',
          symbolSize: 3
        },
        lineStyle: {
          normal: {
            color: '#a6c84c',
            width: 0,
            curveness: 0.2
          }
        },
        data: convertData(item[1])
      }, {

        type: 'lines',
        zlevel: 2,
        symbol: ['none', 'arrow'],
        symbolSize: 10,
        effect: {
          show: true,
          period: 6,
          trailLength: 0,
          symbol: 'circle',
          //				symbol: 'triangle',
          symbolSize: 8,
          color: '#E5464D'
        },
        lineStyle: {
          normal: {
            color: 'white',
            width: 1,
            opacity: 0.6,
            curveness: 0.2
          }
        },
        data: convertData(item[1])
      }, {
        name: item[i],
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          brushType: 'stroke'
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            formatter: '{b}'
          }
        },
        symbolSize: function (val) {
          return val[2] / 8
        },
        itemStyle: {
          normal: {
            color: 'red'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[1].name,
            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
          }
        })
      })
  })

  let option = {
    backgroundColor: 'rgba(0,0,0,0)',
    tooltip: {
      trigger: 'item'
    },
    geo: {
      map: 'nanhai',
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: 'rgba(44, 174, 243, 0.5)',
          borderColor: 'rgba(44, 174, 243, 1)'
        },
        emphasis: {
          areaColor: 'rgba(44, 174, 243, 0.5)'
        }
      }
    },
    series: series
  }

  return option
}
